<template>
    <div class="login_face">
		<div class="login_box">
			<div class="img_box"></div>
			<!-- 登录表单 -->
			<div class="login_msg">
				<!-- 账号输入框 -->
				<el-input placeholder="请输入内容" v-model="loginInfo.account" clearable class="account">
                    <svg-icon  icon-class="password" class="el-input__icon input-icon" />
                </el-input>
				<!-- 密码输入框 -->
				<el-input placeholder="请输入密码" v-model="loginInfo.password"  class="password" show-password>
                    <svg-icon  icon-class="user" class="el-input__icon input-icon" />
                </el-input>
				<!-- 登录按钮 -->
				<el-button class="btn" type="primary" @click="login()">登录</el-button>
			</div>
			
		</div>
    </div>    
  </template>
  
  <script setup>
  import { reactive, ref } from 'vue'

  import { useRouter, useRoute } from 'vue-router';
  const value1 = ref()
const value2 = ref()
  // do not use same name with ref
  const loginInfo = ref({});

  const router = useRouter();
  const route = useRoute();
  
  function login(){
	console.log(loginInfo.value.account)
	let account = loginInfo.value.account
	let password = loginInfo.value.password
	const loginVlue = {
		account,password
	}
	localStorage.setItem("login",JSON.stringify(loginVlue))
	console.log(localStorage.getItem("login"))
    router.push("/home")


  }
  const form = reactive({
    name: '',
    region: '',
    date1: '',
    date2: '',
    delivery: false,
    type: [],
    resource: '',
    desc: '',
  })
  
  const onSubmit = () => {
    console.log('submit!')
  }
  </script>
  <style scoped>
  .login_msg{
		width: 400px;
		height: 300px;
		margin: auto;
		margin-top: 25px;
		/* background-color: lightcyan; */	
	}
	.account,.password{
		width:400px;
		height: 50px;
		margin: 15px;
		margin:15px 0;
		background: rgba(255, 255, 255, 0.65);
		border-radius: 25px;
	}
	.btn{
		width: 220px;
		margin-left: 90px;
		margin-top: 25px;
		border-radius: 40px;
	}
	
	* {
		margin: 0px;
		padding: 0px;
	}
 
	.login_face {
		display: flex;
		height: 100vh;
		align-items: center;
		justify-content: center;
		background-image: url(../assets/myimg.jpg);
		background-size: cover;
	}
 
	.login_box {
		width: 550px;
		height: 450px;
		border-radius: 20px;
		background: rgba(255, 255, 255, 0.38);
	}
 
	.img_box {
		width: 130px;
		height: 130px;
		background-image: url(../assets/backgroup.jpg);
		background-size: cover;
		border-radius: 50%;
		border: white solid 6px;
		opacity: 0.95;
		margin: auto;
		margin-top: -68px;
	}
  </style>
  